<!doctype html>
<html lang="zh-CN"
      th:replace="web-layout :: layout(~{::title}, ~{::style}, ~{}, ~{::script}, ~{::body}, 'userExam')"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>考试详情</title>
    <style>
        ul.fyl-pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
            max-height: 300px;
            overflow-y: auto;
        }

        ul.fyl-pagination li {
            display: inline;
        }

        ul.fyl-pagination li a {
            color: black;
            float: left;
            text-decoration: none;
            transition: background-color .3s;
            /*border: 1px solid #ddd;*/
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-left: white solid 1px;
            border-top: white solid 1px;
        }

        ul.fyl-pagination li a.fyl-active {
            background-color: #4CAF50;
            color: white;
            /*border: 1px solid #fff;*/
        }

        ul.fyl-pagination li a:hover:not(.fyl-active) {
            background-color: #ddd;
        }

        .affix {
            top: 10px;
        }

        .qst-num {
            border: 1px solid #ccc;
        }

        .paper-left{

        }
        .paper-right{

        }
    </style>
    <script>
        //响应数据
        function responseHandler(res) {
            return res.data
        }

        function beginTimeFormatter(value, row, index) {
            return formatDateTime(row.beginTime);
        }

        function endTimeFormatter(value, row, index) {
            return formatDateTime(row.endTime);
        }

        var $table = $('#table')

        function operateFormatter(value, row, index) {
            return [
                '<button type="button" class="btn btn-primary btn-xs startExamBtn">开始考试</button>',
            ].join('');
        }

        var openIndex = 0;
        window.operateEvents = {
            'click .startExamBtn': function (e, value, row, index) {
                openIndex = layer.open({
                    type: 2,
                    area: ['50%', '50%'],
                    scrollbar: false,
                    title: row.name + "---试卷列表",
                    content: '/web/user/exam/paper/list/' + row.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            },
        }

        function startPaper(paper) {
            ajaxText("/web/user/exam/paper/info/" + paper.id, {}, function (html) {
                $("body").html(html);
            })
            //关闭
            layer.close(openIndex);
        }

        // $(document).ready(function(){
        //     var range = 0;             //距下边界长度/单位px
        //     var totalheight = 0;
        //     var main = $("#dataList");                     //主体元素
        //     $(window).scroll(function(){
        //         var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
        //         // console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
        //         // console.log("页面的文档高度 ："+$(document).height());
        //         // console.log('浏览器的高度：'+$(window).height());
        //
        //         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
        //         if(($(document).height()-range) <= totalheight) {
        //             dataList()
        //         }
        //     });
        // });

        $("#loadMore").click(function () {
            dataList()
        })

        //单选题
        $(".a-opt").on('click', function () {
            var name = $(this).attr("name");
            var userAnswer = $('input[type="radio"][name="' + name + '"]:checked').val();
            var uqid = $(this).data("uqid");
            var id = $(this).data("id");
            submitQuestion(id,uqid, userAnswer);
        })
        //多选题
        $(".b-opt").on('click', function () {
            var name = $(this).attr("name");
            var userAnswer = "";
            $(":checkbox[type='checkbox'][name='" + name + "']:checked").each(function () {
                userAnswer = userAnswer + $(this).val();
            });
            var uqid = $(this).data("uqid");
            var id = $(this).data("id");
            submitQuestion(id,uqid, userAnswer);
        })
        //判断题
        $(".c-opt").on('click', function () {
            var name = $(this).attr("name");
            var userAnswer = $('input[type="radio"][name="' + name + '"]:checked').val();
            var uqid = $(this).data("uqid");
            var id = $(this).data("id");
            submitQuestion(id,uqid, userAnswer);
        })
        //主观题
        $(".d-opt").on('input', function () {
            var userAnswer = $(this).val();
            var uqid = $(this).data("uqid");
            var id = $(this).data("id");
            submitQuestion(id,uqid, userAnswer);
        })

        //提交试题
        function submitQuestion(id,uqid, userAnswer) {
            if (userAnswer != '') {
                $("#a" + uqid).addClass("fyl-active");
            } else {
                $("#a" + uqid).removeClass("fyl-active");
            }

            ajaxJson('/user/ajax/submit/qst', {
                userAnswer: userAnswer,
                userQuestionId: uqid,
                qstId: id,
                paperId: $("#paperId").val(),
            }, function (res) {

            })
        }

        var a=0
        $(".submit-paper-btn").on('click', function () {
            if (a==0){
                a=1;
                submitPaper();
            }
        })

        //提交试卷
        function submitPaper() {
            var examId = $("#examId").val();
            var userExamId = $("#userExamId").val();
            var userPaperId = $("#userPaperId").val();
            ajaxJson('/user/ajax/submit/paper', {
                userPaperId: userPaperId
            }, function (res) {
                a=0;
                if (res.status) {
                    location.href = '/user/paper/list/' + examId+"/"+userExamId;
                } else {
                    msgAlert("提交失败");
                }
            })
        }

        var main = $("#dataList");                     //主体元素
        function dataList() {
            $.post("/exam/child/list", {name: $("#name").val()}, function (result) {
                main.append(result);
            });
        }

        var lefttime=Number($("#paperTime").val());
        var showtime = function () {
            // var nowtime = new Date(),  //获取当前时间
            //     endtime = new Date("2022/8/8");  //定义结束时间
            // var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
            //     lefttime=Number($("#paperTime").val());
                leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
                lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
                leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
                lefts = Math.floor(lefttime/1000%60);  //计算秒数
            lefttime=lefttime-1000;
            var str="";
            if (leftd>0){
                str+=leftd + "天";
            }
            if (lefth>0){
                str+=(lefth<10?"0"+lefth:lefth) + ":";
            }
            if (leftm>0){
                str+=(leftm<10?"0"+leftm:leftm) + ":";
            }
            return str+(lefts<10?"0"+lefts:lefts);  //返回倒计时的字符串
        }

        var div = document.getElementById("showtime");
        var num = setInterval (function () {
            if(lefttime<=0){
                clearInterval(num);
                submitPaper();
            }
            div.innerHTML = showtime();
        }, 1000);  //反复执行函数本身
    </script>
</head>
<body>
<!--<h2 th:text="${paper.name}"></h2>
<hr>-->
<ol class="breadcrumb">
    <li><a href="/user/exam/list">考试列表</a></li>
    <li><a th:href="@{/user/paper/list/{id}/{userExamId}(id=${examId},userExamId=${userExamId})}">试卷列表</a></li>
    <li class="active" th:text="${paper.name}"></li>
</ol>
<input type="hidden" id="paperTime" th:value="${surplusTime}">
<input type="hidden" id="userPaperId" th:value="${userExamPaper.id}">
<input type="hidden" id="userExamId" th:value="${userExamId}">
<input type="hidden" id="examId" th:value="${examId}">
<input type="hidden" id="paperId" th:value="${paper.id}">
<p th:if="${#lists.isEmpty(list)}" class="text-center">
    暂无试题！
</p>
<div th:if="${!#lists.isEmpty(list)}" class="clearfix">
    <div class="pull-left" data-spy="affix" data-offset-top="178" data-offset-bottom="0">
        <p>剩余时间：<span id="showtime"></span></p>
        <ul class="fyl-pagination" style="width: 175px;">
            <li th:each="item:${list}"><a th:class="${item.userAnswer}!=null and ${item.userAnswer}!=''?'fyl-active'"
                                          th:id="|a${item.userQstId}|" th:href="'#qst'+${item.id}"
                                          th:text="${itemStat.count}"></a></li>
        </ul>
        <span class="btn btn-primary btn-block fyl-mt10 submit-paper-btn">提交试卷</span>
    </div>
    <div class="pull-right" style="width: calc(100% - 203px);">
        <th:block th:each="item:${list}" th:object="${item}">
            <!--单选题-->
            <div class="well well-sm" th:id="qst+*{id}" th:if="*{type}=='A'">
                <div>[[${itemStat.count}]].[(*{content})]</div>
                <div>
                    <div class="radio" th:each="option:*{optionDtoList}">
                        <label>
                            <input th:checked="*{!#strings.isEmpty(userAnswer)} and *{userAnswer}==${option.option}"
                                   type="radio" class="a-opt" th:data-id="*{id}" th:name="optionsRadios+*{id}"
                                   th:value="${option.option}" th:data-uqid="*{userQstId}">
                            [[${option.option}]].[(${option.content})]
                        </label>
                    </div>
                </div>
            </div>

            <!--多选题-->
            <div class="well well-sm" th:id="qst+*{id}" th:if="*{type}=='B'">
                <div th:id="qst+*{id}">[[${itemStat.count}]].[(*{content})]</div>
                <div>
                    <div class="checkbox" th:each="option:*{optionDtoList}">
                        <label>
                            <input th:checked="${!#strings.isEmpty(item.userAnswer)} and ${#strings.contains(item.userAnswer,option.option)}"
                                   type="checkbox" class="b-opt" th:data-id="*{id}" th:name="optionsRadios+*{id}"
                                   th:value="${option.option}" th:data-uqid="*{userQstId}"> [[${option.option}]].[(${option.content})]
                        </label>
                    </div>
                </div>
            </div>

            <!--判断题-->
            <div class="well well-sm" th:id="qst+*{id}" th:if="*{type}=='C'">
                <div>[[${itemStat.count}]].[(*{content})]</div>
                <div>
                    <div class="radio" th:each="option:*{optionDtoList}">
                        <label>
                            <input th:checked="*{!#strings.isEmpty(userAnswer)} and *{userAnswer}==${option.option}"
                                   type="radio" class="c-opt" th:data-id="*{id}" th:name="optionsRadios+*{id}"
                                   th:value="${option.content}" th:data-uqid="*{userQstId}">
                            [(${option.content})]
                        </label>
                    </div>
                </div>
            </div>

            <!--主观题-->
            <div class="well well-sm" th:id="qst+*{id}" th:if="*{type}=='D'">
                <p>[[${itemStat.count}]].[(*{content})]</p>
                <textarea class="form-control d-opt" th:data-id="*{id}" rows="3" th:text="*{userAnswer}" th:data-uqid="*{userQstId}"></textarea>
            </div>
        </th:block>
    </div>
</div>
</body>
</html>